<xsl:stylesheet version="1.1"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:xlink="http://www.w3.org/1999/xlink">

    <xsl:param name="component"/>

    <xsl:param name="icon-width"/>
    <xsl:param name="icon-height"/>

    <xsl:param name="statusbar-upper-min"/>
    <xsl:param name="statusbar-upper-max"/>
    <xsl:param name="statusbar-lower-min"/>
    <xsl:param name="statusbar-lower-max"/>

    <xsl:param name="statusbar-etch"/>
    <xsl:param name="statusbar-etch-highlight"/>
    <xsl:param name="statusbar-etch-shadow"/>

    <xsl:param name="statusbutton_default-upper-min"/>
    <xsl:param name="statusbutton_default-upper-max"/>
    <xsl:param name="statusbutton_default-lower-min"/>
    <xsl:param name="statusbutton_default-lower-max"/>

    <xsl:param name="statusbutton_pressed-upper-min"/>
    <xsl:param name="statusbutton_pressed-upper-max"/>
    <xsl:param name="statusbutton_pressed-lower-min"/>
    <xsl:param name="statusbutton_pressed-lower-max"/>

    <xsl:param name="statusbutton_focused-upper-min"/>
    <xsl:param name="statusbutton_focused-upper-max"/>
    <xsl:param name="statusbutton_focused-lower-min"/>
    <xsl:param name="statusbutton_focused-lower-max"/>

    <xsl:param name="formbutton_default-fill"/>
    <xsl:param name="formbutton_default-stroke"/>
    <xsl:param name="formbutton_focused-fill"/>
    <xsl:param name="formbutton_focused-stroke"/>
    <xsl:param name="formbutton_pressed-fill"/>
    <xsl:param name="formbutton_pressed-stroke"/>
    <xsl:param name="formbutton-rounding"/>
    <xsl:param name="formbutton-stroke-width"/>

    <xsl:param name="formbutton-height"/>
    <xsl:param name="formbutton-width"/>

    <xsl:param name="content-background-low"/>
    <xsl:param name="content-background-high"/>

    <xsl:param name="screen-width"/>
    <xsl:param name="screen-height"/>

    <xsl:param name="statusbar-height"/>
    <xsl:param name="statusbutton-height"/>
    <xsl:param name="statusbutton-width"/>
    <xsl:param name="statusbutton-rounding"/>

    <xsl:param name="etch-width"/>
    <xsl:param name="shadow-width"/>

    <xsl:param name="statusbutton-back"/>
    <xsl:param name="statusbutton-forward"/>

    <xsl:output method="xml"/>

    <xsl:template match="/">
        <xsl:choose>
            <xsl:when test="$component = 'icon'">
                <xsl:call-template name="icon"/>
            </xsl:when>
            <xsl:when test="$component = 'panel'">
                <xsl:call-template name="panel"/>
            </xsl:when>
            <xsl:when test="$component = 'statusbar'">
                <xsl:call-template name="statusbar"/>
            </xsl:when>
            <xsl:when test="$component = 'formbutton'">
                <xsl:call-template name="formbutton"/>
            </xsl:when>
            <xsl:when test="$component = 'formbutton_default'">
                <xsl:call-template name="formbutton_up_image">
                    <xsl:with-param name="fill" select="$formbutton_default-fill"/>
                    <xsl:with-param name="stroke" select="$formbutton_default-stroke"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'formbutton_pressed'">
                <xsl:call-template name="formbutton_up_image">
                    <xsl:with-param name="fill" select="$formbutton_pressed-fill"/>
                    <xsl:with-param name="stroke" select="$formbutton_pressed-stroke"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'formbutton_focused'">
                <xsl:call-template name="formbutton_up_image">
                    <xsl:with-param name="fill" select="$formbutton_focused-fill"/>
                    <xsl:with-param name="stroke" select="$formbutton_focused-stroke"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'statusbar_image'">
                <xsl:call-template name="statusbar_image"/>
            </xsl:when>
            <xsl:when test="$component = 'statusbutton' or $component = 'statusbutton_forward' or $component = 'statusbutton_back'">
                <xsl:call-template name="statusbutton">
                    <xsl:with-param name="prefix" select="$component"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'statusbutton_default'">
                <xsl:call-template name="statusbutton_image">
                    <xsl:with-param name="lower-max" select="$statusbutton_default-lower-max"/>
                    <xsl:with-param name="lower-min" select="$statusbutton_default-lower-min"/>
                    <xsl:with-param name="upper-max" select="$statusbutton_default-upper-max"/>
                    <xsl:with-param name="upper-min" select="$statusbutton_default-upper-min"/>
                    <xsl:with-param name="back" select="$statusbutton-back"/>
                    <xsl:with-param name="forward" select="$statusbutton-forward"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'statusbutton_focused'">
                <xsl:call-template name="statusbutton_image">
                    <xsl:with-param name="lower-max" select="$statusbutton_focused-lower-max"/>
                    <xsl:with-param name="lower-min" select="$statusbutton_focused-lower-min"/>
                    <xsl:with-param name="upper-max" select="$statusbutton_focused-upper-max"/>
                    <xsl:with-param name="upper-min" select="$statusbutton_focused-upper-min"/>
                    <xsl:with-param name="back" select="$statusbutton-back"/>
                    <xsl:with-param name="forward" select="$statusbutton-forward"/>
                </xsl:call-template>
            </xsl:when>
            <xsl:when test="$component = 'statusbutton_pressed'">
                <xsl:call-template name="statusbutton_image">
                    <xsl:with-param name="lower-max" select="$statusbutton_pressed-lower-max"/>
                    <xsl:with-param name="lower-min" select="$statusbutton_pressed-lower-min"/>
                    <xsl:with-param name="upper-max" select="$statusbutton_pressed-upper-max"/>
                    <xsl:with-param name="upper-min" select="$statusbutton_pressed-upper-min"/>
                    <xsl:with-param name="back" select="$statusbutton-back"/>
                    <xsl:with-param name="forward" select="$statusbutton-forward"/>
                </xsl:call-template>
            </xsl:when>
        </xsl:choose>
    </xsl:template>

    <xsl:template name="icon">
        <xsl:param name="width" select="$icon-width"/>
        <xsl:param name="height" select="$icon-height"/>

        <xsl:variable name="shadow-reach" select="$height div 40"/>
        <xsl:variable name="tile-width" select="$width - $shadow-reach * 2"/>
        <xsl:variable name="tile-height" select="$height - $shadow-reach * 2"/>


        <xsl:variable name="panel-width" select="$tile-width div 4"/>
        <xsl:variable name="panel-height" select="$tile-height"/>
        <xsl:variable name="panel-gap" select="($tile-width - $panel-width * 3) div 5"/>

        <svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
            <defs>
                <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="{$width}" height="{$height}">
                    <feGaussianBlur in="SourceAlpha" stdDeviation="{$shadow-reach}" result="blur"/>
                    <feOffset in="blur" dx="0" dy="{$shadow-reach}" result="offsetBlur"/>
                    <feMerge>
                        <feMergeNode in="offsetBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <filter id="ButtonFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="{$width}" height="{$height}">
                    <feGaussianBlur in="SourceAlpha" stdDeviation="{$shadow-width div 2}" result="blur"/>
                    <feOffset in="blur" dx="0" dy="{$shadow-reach}" result="offsetBlur"/>
                    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
                                        specularExponent="15" lighting-color="#ffffff"
                                        result="specOut">
                        <fePointLight x="{$width div 2}" y="{$height div 5}" z="50"/>
                    </feSpecularLighting>
                    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
                    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
                                 k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
                    <feMerge>
                        <feMergeNode in="offsetBlur"/>
                        <feMergeNode in="litPaint"/>
                    </feMerge>
                </filter>

            </defs>
            <g transform="translate({$shadow-reach}, 0)">
                <rect x="0" y="0" width="{$tile-width}" height="{$tile-height}" fill="#999999" stroke="none"
                      rx="{$panel-width div 2}" ry="{$panel-width div 2}" filter="url(#ButtonFilter)"/>
                <clipPath id="clip">
                    <path d="M 0,0 L {$tile-width},0 L {$tile-width},{$tile-height * 0.75} L 0,{$tile-height * 0.45}"/>
                </clipPath>
                <g transform="translate({$panel-gap}, {$tile-height div 10}) scale(1, 0.7) skewX(-7)" clip-path="url(#clip)">
                    <rect x="{$panel-gap}" y="0" width="{$panel-width}" height="{$panel-height}" stroke="none"
                          fill="#9fa617"/>
                    <text x="{$panel-gap + $panel-width div 2}" y="{$panel-height div 3}" fill="white" stroke="none"
                          text-anchor="middle" font-size="{$panel-width}" font-family="Silom" filter="url(#MyFilter)">C
                    </text>
                    <rect x="{$panel-width + $panel-gap*2}" y="0" width="{$panel-width}" height="{$panel-height}"
                          stroke="none" fill="#0082c6"/>
                    <text x="{$panel-width + $panel-gap*2 + $panel-width div 2}" y="{$panel-height div 3}" fill="white"
                          stroke="none"
                          text-anchor="middle" font-size="{$panel-width}" font-family="Silom" filter="url(#MyFilter)">B
                    </text>
                    <rect x="{$panel-width*2 + $panel-gap*3}" y="0" width="{$panel-width}" height="{$panel-height}"
                          stroke="none" fill="#00477f"/>
                    <text x="{$panel-width*2 + $panel-gap*3 + $panel-width div 2}" y="{$panel-height div 3}"
                          fill="white" stroke="none"
                          text-anchor="middle" font-size="{$panel-width}" font-family="Silom" filter="url(#MyFilter)">D
                    </text>
                </g>
                <text x="{$tile-width div 2}" y="{$panel-height - $panel-gap * 2}" fill="#00477f" stroke="none"
                      text-anchor="middle" font-size="{$panel-width}" font-family="Silom"
                      transform=" skewX(-7) translate({$panel-width div 3},0)">SOLAR
                </text>
            </g>
        </svg>

    </xsl:template>

    <xsl:template name="panel">
        <xsl:param name="width" select="$screen-width"/>
        <xsl:param name="height" select="$screen-height"/>
        <svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
            <g>
                <defs>
                    <linearGradient id="background-gradient">
                        <stop offset="5%" stop-color="{$content-background-high}"/>
                        <stop offset="95%" stop-color="{$content-background-low}"/>
                    </linearGradient>
                </defs>
                <rect x="0" y="0" width="{$width}" height="{$height}" stroke="none" fill="url(#background-gradient)"/>
            </g>
        </svg>
    </xsl:template>

    <xsl:template name="statusbar">
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/statusbar_image"
                android:tileMode="repeat"/>
    </xsl:template>

    <xsl:template name="statusbar_image">
        <xsl:param name="width" select="$screen-width"/>
        <xsl:param name="height" select="$statusbar-height"/>
        <svg width="{$width}" height="{$height}" viewBox="0 0 {$width} {$height}">
            <g>
                <defs>
                    <linearGradient id="background-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stop-color="{$statusbar-upper-max}"/>
                        <stop offset="48%" stop-color="{$statusbar-upper-min}"/>
                        <stop offset="52%" stop-color="{$statusbar-lower-max}"/>
                        <stop offset="100%" stop-color="{$statusbar-lower-min}"/>
                    </linearGradient>
                </defs>
                <rect x="0" y="0" width="{$width}" height="{$height}" stroke="none" fill="url(#background-gradient)"/>
                <rect x="0" y="0" width="{$width}" height="{$etch-width}" stroke="none"
                      fill="{$statusbar-etch-shadow}"/>
                <rect x="0" y="{$etch-width}" width="{$width}" height="{$etch-width}" stroke="none"
                      fill="{$statusbar-etch-highlight}"/>
                <rect x="0" y="{$height - $etch-width}" width="{$width}" height="{$etch-width}" stroke="none"
                      fill="{$statusbar-etch-shadow}"/>
            </g>
        </svg>
    </xsl:template>

    <xsl:template name="statusbutton">
        <xsl:param name="prefix"/>
        <!-- produce an android XML file -->
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@drawable/{$prefix}_pressed" android:state_pressed="true"/>
            <item android:drawable="@drawable/{$prefix}_focused" android:state_focused="true"/>
            <item android:drawable="@drawable/{$prefix}_default"/>
        </selector>
    </xsl:template>

    <xsl:template name="formbutton">
        <!-- produce an android XML file -->
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@drawable/formbutton_pressed" android:state_pressed="true"/>
            <item android:drawable="@drawable/formbutton_focused" android:state_focused="true"/>
            <item android:drawable="@drawable/formbutton_default"/>
        </selector>
    </xsl:template>

    <xsl:template name="formbutton_up_image">
        <xsl:param name="fill"/>
        <xsl:param name="stroke"/>

        <xsl:param name="width" select="$formbutton-width"/>
        <xsl:param name="height" select="$formbutton-height"/>


        <svg width="{$width+2}" height="{$height+2}" viewBox="-1 -1 {$width+2} {$height+2}">
            <g>
                <clipPath id="bounds">
                    <rect x="0" y="0" width="{$width}" height="{$height}"/>
                </clipPath>
                <rect
                        x="{$formbutton-stroke-width div 2}"
                        y="{$formbutton-stroke-width div 2}"
                        width="{$width - $formbutton-stroke-width}"
                        height="{$height - $formbutton-stroke-width}"
                        rx="{$formbutton-rounding}"
                        ry="{$formbutton-rounding}"
                        stroke="{$stroke}"
                        stroke-width="{$formbutton-stroke-width}"
                        fill="{$fill}"
                        clip-path="url(#bounds)"/>
                <!--
                <rect
                        x="0"
                        y="0"
                        width="{$width - $shadow-width}"
                        height="{$height - $shadow-width}"
                        rx="{$formbutton-rounding}"
                        ry="{$formbutton-rounding}"
                        stroke="none"
                        fill="{$color}"
                        filter="url(#MyFilter)"
                        clip-path="url(#bounds)"/>
                        -->
                <!-- add in the 9 patch markers -->
                <rect x="{$formbutton-rounding}" y="-1" width="{$width - $formbutton-rounding * 2}"
                      height="1" stroke="none" fill="black"/>
                <rect x="-1" y="{$formbutton-rounding}" width="1"
                      height="{$height - $formbutton-rounding * 2}" stroke="none" fill="black"/>

            </g>
        </svg>
    </xsl:template>

    <xsl:template name="statusbutton_image">
        <xsl:param name="upper-min"/>
        <xsl:param name="upper-max"/>
        <xsl:param name="lower-min"/>
        <xsl:param name="lower-max"/>
        <xsl:param name="back"/>
        <xsl:param name="forward"/>

        <xsl:param name="width" select="$statusbutton-width"/>
        <xsl:param name="height" select="$statusbutton-height"/>

        <svg width="{$width+2}" height="{$height+2}" viewBox="-1 -1 {$width+2} {$height+2}">
            <g>
                <defs>
                    <linearGradient id="background-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stop-color="{$upper-max}"/>
                        <stop offset="48%" stop-color="{$upper-min}"/>
                        <stop offset="52%" stop-color="{$lower-max}"/>
                        <stop offset="100%" stop-color="{$lower-min}"/>
                    </linearGradient>
                    <path id="path">
                        <xsl:attribute name="d">
                            <xsl:text>M </xsl:text>
                            <xsl:value-of select="$etch-width + $statusbutton-rounding"/>
                            <xsl:text>,</xsl:text>
                            <xsl:value-of select="$etch-width"/>

                            <xsl:text> L </xsl:text>
                            <xsl:value-of select="$width - $etch-width - $statusbutton-rounding"/>
                            <xsl:text>,</xsl:text>
                            <xsl:value-of select="$etch-width"/>

                            <xsl:choose>
                                <xsl:when test="$forward = 'true'">

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$width - $etch-width"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$height div 2"/>

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$width - $etch-width - $statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$height - $etch-width * 2"/>

                                </xsl:when>
                                <xsl:otherwise>

                                    <xsl:text> A </xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text> 0 0,1 </xsl:text>
                                    <xsl:value-of select="$width - $etch-width"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$etch-width + $statusbutton-rounding"/>

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$width - $etch-width"/>
                                    <xsl:text>, </xsl:text>
                                    <xsl:value-of select="$height - $etch-width * 2 - $statusbutton-rounding"/>

                                    <xsl:text> A </xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text> 0 0,1 </xsl:text>
                                    <xsl:value-of select="$width - $etch-width - $statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$height - $etch-width * 2"/>

                                </xsl:otherwise>
                            </xsl:choose>

                            <xsl:text> L </xsl:text>
                            <xsl:value-of select="$etch-width + $statusbutton-rounding"/>
                            <xsl:text>,</xsl:text>
                            <xsl:value-of select="$height - $etch-width * 2"/>

                            <xsl:choose>
                                <xsl:when test="$back = 'true'">

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$etch-width"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$height div 2"/>

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$etch-width + $statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$etch-width"/>

                                </xsl:when>
                                <xsl:otherwise>

                                    <xsl:text> A </xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text> 0 0,1 </xsl:text>
                                    <xsl:value-of select="$etch-width"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$height - $etch-width * 2 - $statusbutton-rounding"/>

                                    <xsl:text> L </xsl:text>
                                    <xsl:value-of select="$etch-width"/>
                                    <xsl:text>, </xsl:text>
                                    <xsl:value-of select="$etch-width + $statusbutton-rounding"/>

                                    <xsl:text> A </xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$statusbutton-rounding"/>
                                    <xsl:text> 0 0,1 </xsl:text>
                                    <xsl:value-of select="$etch-width + $statusbutton-rounding"/>
                                    <xsl:text>,</xsl:text>
                                    <xsl:value-of select="$etch-width"/>

                                </xsl:otherwise>
                            </xsl:choose>

                            <xsl:text> z</xsl:text>
                        </xsl:attribute>
                    </path>
                </defs>
                <clipPath id="top-half">
                    <rect x="0" y="0" width="{$width}" height="{$height div 2}"/>
                </clipPath>
                <clipPath id="all">
                    <rect x="0" y="0" width="{$width}" height="{$height}"/>
                </clipPath>
                <g clip-path="url(#all)">
                    <use
                            xlink:href="#path"
                            stroke="{$statusbar-etch-highlight}"
                            stroke-width="{$etch-width}"
                            fill="none"
                            transform="translate(0,{$etch-width})"/>
                    <use
                            xlink:href="#path"
                            stroke="none"
                            fill="url(#background-gradient)"/>
                    <use
                            xlink:href="#path"
                            stroke="{$statusbar-etch-shadow}"
                            stroke-width="{$etch-width}"
                            fill="none"
                            transform="translate(0,{$etch-width})"
                            clip-path="url(#top-half)"/>

                    <use
                            xlink:href="#path"
                            stroke="{$statusbar-etch}"
                            stroke-width="{$etch-width}"
                            fill="none"
                            transform="translate(0,0)"/>
                </g>
                <!--
                <rect
                        x="{$etch-width}"
                        y="{$etch-width * 2}"
                        width="{$width - $etch-width * 2}"
                        height="{$height - $etch-width * 3}"
                        rx="{$statusbutton-rounding}"
                        ry="{$statusbutton-rounding}"
                        stroke="{$statusbar-etch-highlight}"
                        stroke-width="{$etch-width}"
                        fill="none"/>
                <rect
                        x="{$etch-width}"
                        y="{$etch-width}"
                        width="{$width - $etch-width * 2}"
                        height="{$height - $etch-width * 3}"
                        rx="{$statusbutton-rounding}"
                        ry="{$statusbutton-rounding}"
                        stroke="none"
                        fill="url(#background-gradient)"/>
                <rect
                        x="{$etch-width}"
                        y="{$etch-width * 2}"
                        width="{$width - $etch-width * 2}"
                        height="{$height - $etch-width * 4}"
                        rx="{$statusbutton-rounding}"
                        ry="{$statusbutton-rounding}"
                        stroke="{$statusbar-etch-shadow}"
                        stroke-width="{$etch-width}"
                        fill="none"/>
                <rect
                        x="{$etch-width}"
                        y="{$etch-width}"
                        width="{$width - $etch-width * 2}"
                        height="{$height - $etch-width * 3}"
                        rx="{$statusbutton-rounding}"
                        ry="{$statusbutton-rounding}"
                        stroke="{$statusbar-etch}"
                        stroke-width="{$etch-width}"
                        fill="none"/>
                        -->
                <!-- add in the 9 patch markers -->
                <rect x="{$statusbutton-rounding * 2}" y="-1" width="{$width - $statusbutton-rounding * 4}" height="1"
                      stroke="none" fill="black"/>
                <rect x="-1" y="{$statusbutton-rounding}" width="1" height="{$height - $statusbutton-rounding * 2}"
                      stroke="none" fill="black"/>
            </g>
        </svg>

    </xsl:template>

</xsl:stylesheet>